<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3-escook</title>
  <link rel="stylesheet" href="./lib/style.css">
  <script type="importmap">
    {
      "imports" : {
        "vue": "./lib/vue-3.4.29.js"
      }
    }
  </script>
  <script type="module">
    import { createApp, ref } from 'vue'

    const app = createApp({
      setup() {
        // 列表数据
        const list = ref([
          { id: 1, name: '关羽' },
          { id: 2, name: '张飞' },
          { id: 3, name: '马超' },
          { id: 4, name: '赵云' },
          { id: 5, name: '黄忠' }
        ])

        // 创建DOM引用的数组
        const rowsRef = ref([])

        const setRowColor = () => {
          // console.log(rowsRef.value)
          rowsRef.value.forEach((liDOM, i) => {
            const color = i % 2 === 0 ? 'lightgreen' : 'orange'
            liDOM.style.backgroundColor = color
          })
        }

        return {
          list,
          rowsRef,
          setRowColor
        }
      }
    })

    app.mount('#app')
  </script>
</head>

<body>
  <div id="app">
    <button @click="setRowColor">为列表项设置奇偶行变色效果</button>
    <ul>
      <li v-for="item in list" :key="item.id" ref="rowsRef">{{ item.name }}</li>
    </ul>
  </div>
</body>

</html>